<template>
	<div class="statics-box my-2">
		<div
			class="item"
			:class="[item.isClick ? 'cursor-pointer' : ' cursor-default', index === 0 && 'item1']"
			v-for="(item, index) in items"
			:key="item.name"
			@click="handleClick(item)"
		>
			<div class="w-[63px] h-[63px] mr-2">
				<img :src="item.icon || iconArr[index]" />
			</div>
			<div class="flex flex-col">
				<span class="text-[33px] font-bold counts" :class="item.isClick && 'text-[#2898ff]'">
					{{ item.count || 0 }}
				</span>
				<span class="text-lg title">{{ item.name }}</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import icon1 from '/@/assets/project/1.png';
import icon2 from '/@/assets/project/2.png';
import icon3 from '/@/assets/project/3.png';
import icon4 from '/@/assets/project/4.png';
import icon5 from '/@/assets/project/5.png';
let iconArr = [icon1, icon2, icon3, icon4, icon5];

const emits = defineEmits(['click']);
defineProps({
	items: {
		type: Array as PropType<StatItem[]>,
		default: () => [{ icon: '', count: 0, name: '' }],
	},
});
function handleClick(item: StatItem) {
	if (item.isClick) {
		emits('click', item.type ? item.type : item);
	}
}
</script>

<style lang="scss" scoped>
.statics-box {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	gap: 20px;
	.item {
		display: flex;
		padding: 20px 26px;
		font-weight: 400;
		font-size: 16px;
		color: #666666;
		border-radius: 10px;
		background: #fff;
		cursor: pointer;
		&.item1 {
			background: url(/@/assets/kupono/icon.png) no-repeat center / cover;
			.counts,
			.title {
				color: #fff;
			}
		}
		.counts {
			font-weight: bold;
			font-size: 32px;
			// color: #333333;
		}
		.icon {
			margin-right: 20px;
			width: 63px;
			height: 63px;
		}
	}
}
</style>
